<template>
    <div class="register_step2">
        <h2 class="tip">
            确认挂号信息
        </h2>
        <!-- 卡片:展示就诊人信息 -->
        <el-card class="register_step2-card1">
            <template #header>
                <div class="card_header">
                    <span>请选择就诊人</span>
                    <el-button @click="goUser" :icon="User" type="primary">添加就诊人</el-button>
                </div>
            </template>

            <!-- main 就诊人信息 -->
            <div class="visitor">
                <Visitor @click="changeIndex(index)" :index="index" :currentIndex="currentIndex" :user="item"
                    class="visitor_item" v-for="(item, index) in userArr" :key="item.id" />
            </div>
        </el-card>

        <!-- 卡片:展示医生人信息 -->
        <el-card class="register_step2-card2">
            <template #header>
                <span class="register_step2-title">挂号信息</span>
            </template>
            <!-- descriptions 展示医生的信息 -->
            <el-descriptions class="margin-top" :column="docInfoColumn" :border="true">
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊日期:
                        </div>
                    </template>
                    {{ docInfo?.workDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊医院:
                        </div>
                    </template>
                    {{ docInfo.param?.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            就诊科室:
                        </div>
                    </template>
                    {{ docInfo.param?.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生姓名:
                        </div>
                    </template>
                    <el-tag size="small">{{ docInfo?.docname || '暂无' }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生职称:
                        </div>
                    </template>
                    {{ docInfo.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医生专长:
                        </div>
                    </template>
                    {{ docInfo.skill }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                            医事服务费:
                        </div>
                    </template>
                    <el-tag type="danger" size="small">{{ docInfo.amount }}</el-tag>
                </el-descriptions-item>
            </el-descriptions>

            <div class="btn">
                <el-button @click="submitOrder" :disabled="currentIndex === -1 ? true : false"
                    type="primary">确认挂号</el-button>
            </div>
        </el-card>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { User } from '@element-plus/icons-vue';
import Visitor from '@/components/visitor/index.vue'
import type { UserResponseData, UserArr } from '@/api/hospital/type';
import { useRoute, useRouter } from 'vue-router';
import debounce from '@/utils/debounce';
// 引入获取就诊人信息接口
import { reqGetUser, reqDoctorInfo } from '@/api/hospital';
import { reqSubmitOrder } from '@/api/user'
import type { SubmitOrder } from "@/api/user/type";
// @ts-ignore
import { ElMessage } from 'element-plus';
let $route = useRoute()
let $router = useRouter()
// 存储全部就诊人信息
let userArr = ref<UserArr>([])
// 存储医生信息
let docInfo = ref<any>({})
// 监听挂号信息分几列
let docInfoColumn = ref<number>(2)
// 存储用户确定就诊人索引值
let currentIndex = ref<number>(-1)

onMounted(() => {
    // 获取就诊人信息
    fetchUserData();
    // 获取医生信息
    fetchDoctorData();
    hasDocInfo();
})
// 获取就诊人信息
const fetchUserData = async () => {
    let { code, data }: UserResponseData = await reqGetUser();
    if (code === 200) {
        userArr.value = data;
    }
}
// 获取医生信息
const fetchDoctorData = async () => {
    let { code, data } = await reqDoctorInfo($route.query.docId as string)
    if (code === 200) {
        docInfo.value = data
    }
}
// 点击就诊人子组件的回调
const changeIndex = (index: number) => {
    currentIndex.value = index
}

const hasDocInfo = () => {
    if (window.innerWidth <= 768) {
        docInfoColumn.value = 1
    } else {
        docInfoColumn.value = 2
    }
};

// 确定挂号按钮
const submitOrder = async () => {
    // 医院编号
    let hoscode = docInfo.value.hoscode;
    // 医生的ID
    let scheduleId = docInfo.value.id;
    // 就诊人的ID
    let patientId = userArr.value[currentIndex.value].id;
    let { code, data, message }: SubmitOrder = await reqSubmitOrder(hoscode, scheduleId, patientId);
    if (code === 200) {
        $router.push({
            path: '/user/order', query: {
                orderId: data
            }
        })
    } else {
        ElMessage({
            message: message,
            type: 'error'
        })
    }
}
// 预约挂号添加就诊人的方法
const goUser = () => {
    $router.push({ path: '/user/patient', query: { type: 'add' } })
}

// onresize 监听视口变化
window.addEventListener('resize', debounce(() => {
    hasDocInfo()
}, 200));
</script>
<style scoped lang="scss">
.register_step2 {
    .tip {
        font-size: 18px;
        color: #7f7f7f7f;
    }

    .register_step2-card1 {
        margin: 16px 0;

        .card_header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .visitor {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .visitor_item {
                width: 32%;
                margin-bottom: 16px;
                cursor: pointer;
            }
        }
    }

    .register_step2-card2 {
        .btn {
            margin-top: 16px;
            text-align: center;
        }
    }
}

@media (max-width:1280px) {
    .register_step2 {
        .tip {
            font-size: 16px;
            text-align: center;
        }

        .register_step2-card1 {
            .visitor {
                justify-content: space-around;

                .visitor_item {
                    width: 46%;
                }
            }
        }
    }
}

@media (max-width:768px) {
    .register_step2 {
        .register_step2-card1 {
            .card_header {
                font-size: 14px;

                .el-button {
                    font-size: 12px;
                }
            }

            .visitor {
                justify-content: center;

                .visitor_item {
                    width: 100%;
                }
            }
        }

        .register_step2-card2 {
            .register_step2-title {
                font-size: 14px;
            }

            .margin-top {

                .cell-item,
                :deep(.el-descriptions__content) {
                    font-size: 12px;
                }
            }
        }
    }
}
</style>